iT邦幫忙

0

Javascript 進階 5-4 閉包 Closure

  • 分享至 

  • xImage
  •  

這個章節要來討論閉包的概念

函式包函式,並且在子函式中調用父函式的變數,避免父函式的變數在沒有任何參照的情況下被釋放掉。

講的好像很困難,我們直接來看範例比較快

function storeMoney() {
    var money = 1000;
    return function (price) {
        money = money + price;
        return money;
    }
}

console.log(storeMoney());
console.log(storeMoney()(100));

如果是這樣的話,下面兩個 console.log 會印出甚麼呢?

https://ithelp.ithome.com.tw/upload/images/20200103/20121770kQuZdWGARc.png

第一個印出的是我們 return 的匿名函式,也就是說 storeMoney() 變成一個表達式,他回傳的值式我們定義的 匿名函式。

而第二個我們再透過(),並傳入數字去執行剛剛定義的 匿名函式 執行了 1000 + 傳入的數字後,他會再把總和回傳回來,所以得到 1100的結果。

這樣的狀況就稱為閉包。

然而閉包還有一個常見的應用如下

function storeMoney() {
    var money = 1000;
    return function (price) {
        money = money + price;
        return money;
    }
}

var odinMoney = storeMoney();
console.log(odinMoney(100)); // 1100
console.log(odinMoney(100)); // 1200
console.log(odinMoney(100)); // 1300

會造成這樣累加的結果是因為父元素的 money 變數沒有消失,一直被子函式給參照著,所以金額就不斷地累加上去。

更特別的是下面這個狀況

function storeMoney() {
    var money = 1000;
    return function (price) {
        money = money + price;
        return money;
    }
}

var odinMoney = storeMoney();
console.log(odinMoney(100)); // 1100
console.log(odinMoney(100)); // 1200
console.log(odinMoney(100)); // 1300

var jayMoney = storeMoney();
console.log(jayMoney(1000)); // 2000
console.log(jayMoney(1000)); // 3000
console.log(jayMoney(1000)); // 4000

如果重新宣告一個變數,他還可以同時分別累積不同的金額。

很神奇吧!

以上就是閉包的簡單介紹,詳細的介紹在下一篇文章

希望對各位有幫助,汪汪!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言